import React, {Component} from 'react';
import './01-index.css'
import Home from './tabCase/home'
import Cinema from './tabCase/cinema'
import My from './tabCase/my'
class App extends Component {
    state = {
        list: [
            {
                id: 0,
                name: '首页'
            }, {
                id: 1,
                name: '影院'
            }, {
                id: 2,
                name: '我的'
            },
        ],
        current:0,

    }

    render() {

        return (
            <div>
                {/*//方法一
                {
                    this.state.current===0&& <Home></Home>
                }{
                    this.state.current===1&& <Cinema></Cinema>
                }{
                    this.state.current===2&& <My></My>
                }*/}

                {
                    //方法二,处理函数
                    this.witch()
                }

                <ul>
                    {
                        this.state.list.map((item, index) =>
                            <li key={item.id} className={this.state.current === index ? 'activeaa' : ''} onClick={()=>{
                                this.clickCurrent(index)
                            }}>
                                {item.name}</li>
                        )
                    }
                </ul>
            </div>
        );
    }

    clickCurrent(index){
        this.setState({
            current:index
        })
    }

    witch(){
        switch (this.state.current) {
            case 0:
                return <Home></Home>
            case 1:
                return <Cinema></Cinema>
            case 2:
                return <My></My>
            default:
                return null
        }
    }
}

export default App;
